<template>
  <div class="login" @keyup.13="toLogin">
    <div class="loginBox">
      <div class="loginContBox">
        <div class="title">
          <div class="logo">
            <i class="el-icon-star-on"></i>
          </div>
          <div class="titleName">
            <h1>求礼品发货API</h1>
            <span>欢迎进入求礼品网站的发货API</span>
          </div>
        </div>
        <ul class="form">
          <li>
            <i class="user el-icon-edit-outline"></i>
            <input type="text" v-model="userName" placeholder="账户">
          </li>
          <li>
            <i class="password el-icon-edit-outline"></i>
            <input type="password" v-model="password" placeholder="密码">
          </li>
        </ul>
        <b class="button-l" @click="toLogin">登录</b>
      </div>
    </div>
  </div>
</template>
<script type="text/ecmascript-6">
import { login } from '@api/post'
import md5 from 'md5'
import { mapActions } from 'vuex'
export default {
  name: 'login',
  data () {
    return {
      userName: '',
      password: ''
    }
  },
  methods: {
    toLogin () {
      if (this.userName === '') {
        this.$message({
          message: '请输入账户',
          type: 'warning'
        })
      } else if (this.password === '') {
        this.$message({
          message: '请输入密码',
          type: 'warning'
        })
      } else {
        login({
          userName: this.userName,
          password: md5(this.password),
          domain: '192.168.1.188:8004'
        }).then((res) => {
          this.$routerTo('userManger')
          if (res.data.code === '200') {
            this.$message({
              message: '登录成功',
              type: 'success'
            })
            this.setUserInfo(res.data.data)
            this.$routerTo('userManger')
          }
        })
      }
    },
    ...mapActions([
      'setUserInfo'
    ])
  }
}
</script>
<style lang="stylus" rel="stylesheet/stylus" scoped>
.login
  width 100%
  height 100%
  background #F9F9F9
  display flex
  align-items center
  justify-content center
  .loginBox
    width 780px
    padding 100px 0
    display flex
    justify-content center
    align-items center
    background #ffffff
    box-shadow 0 0 50px RGBA(0, 0, 0, 0.14)
    .loginContBox
      width 370px
      .title
        display flex
        justify-content center
        margin-bottom 40px
        .logo
          width 40px
          margin-right 30px
          i
            fontSize(40px, 1, $mainColor)
        .titleName
          h1
            fontSize(33px, 46px, RGBA(0, 0, 0, 0.85))
            margin-bottom 8px
          span
            fontSize(14px, 20px, #999999)
      .form
        li
          border-radius 4px
          height 40px
          box-sizing border-box
          border 1px solid #D9D9D9
          padding 9px 10px
          display flex
          align-items center
          margin-bottom 24px
          i
            font-size 12px
            color #888888
            margin-right 10px
          input
            flex 1
            border none
            fontSize(16px, 22px, RGBA(0, 0, 0, 0.85))
      .button-l
        margin-bottom 20px
</style>
